<template>
  <div class="change_password">
    <div class="current">
      <span>当前手机号：</span>
      <span v-if="userInfo">{{ phone }}</span>
    </div>
    <div class="change_form">
      <van-field
        v-model="newPassword"
        placeholder="设置新密码"
        type="password"
      />
      <van-field
        v-model="confirmPassword"
        placeholder="确认新密码"
        type="password"
      />
      <van-field v-model="verifice" placeholder="填写验证码">
        <template #button>
          <van-button size="small" @click="GetVerify" v-if="getVerify == false"
            >获取验证码</van-button
          >
          <span v-else-if="getVerify == true">剩余 {{ CountDown }} s</span>
          <van-button size="small" @click="GetVerify" v-else-if="getVerify == 3"
            >重新获取</van-button
          >
        </template>
      </van-field>
      <van-button class="btn" type="danger" block @click="affirm"
        >确认修改</van-button
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: null,
      newPassword: null,
      confirmPassword: null,
      verifice: null,
      verify_code_key: null,
      CountDown: 60,
      getVerify: false,
    };
  },
  created() {
    this.axios.get("/api/userinfo").then((response) => {
      this.userInfo = response.data.data;
    });
    this.axios.get("/api/verify_code").then((response) => {
      this.verify_code_key = response.data.data.key;
    });
  },
  computed: {
    phone() {
      var result = "";
      result = this.userInfo.phone.split("");
      result.splice(3, 4, "****");
      return result.join("");
    },
  },
  methods: {
    GetVerify() {
      this.axios
        .post("/api/register/verify", {
          key: this.verify_code_key,
          phone: this.userInfo.phone,
        })
        .then((response) => {
          if (response.data.status == 200) {
            this.$toast(response.data.msg);
            this.getVerify = true;
            var timer = setInterval(() => {
              this.CountDown--;
              if (this.CountDown <= 0) {
                clearInterval(timer);
                this.CountDown = 60;
                this.getVerify = 3;
                console.log(this.getVerify);
              }
            }, 1000);
          } else {
            this.$toast(response.data.msg);
          }
        });
    },
    affirm() {
      if (this.newPassword == "") {
        this.$toast("请输入密码");
      } else if (this.newPassword.length < 6 || this.newPassword.length > 16) {
        this.$toast("密码长度 6-16");
      } else {
        if (this.confirmPassword != this.newPassword) {
          this.$toast("两次密码不一致");
        } else {
          if (this.verifice == "") {
            this.$toast("请输入验证码");
          } else {
            this.axios
              .post("/api/register/reset", {
                account: this.userInfo.phone,
                captcha: this.verifice,
                password: this.newPassword,
              })
              .then((response) => {
                if (response.data.status != 200) {
                  this.$toast(response.data.msg);
                } else {
                  this.$toast("修改成功，请重新登录！");
                  setTimeout(() => {
                    this.$store.state.data.token = null;
                    this.$router.push("/login");
                  }, 2000);
                }
              });
          }
        }
      }
    },
  },
};
</script>

<style lang="less">
.change_password {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  .current {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      &:nth-child(1) {
        font-weight: bold;
      }
    }
  }
  .change_form {
    width: 100%;
    padding: 0 20px;
    .van-cell {
      font-size: 16px;
      border-bottom: 1px solid #d3d3d5;
      &::after {
        content: " ";
        height: 0;
        overflow: hidden;
        opacity: 0;
      }
      .van-field__button {
        height: 33px;
        span {
          color: #c8c9cc;
          font-size: 16px;
          line-height: 33px;
        }
      }
      span.van-button__text {
        color: red;
      }
      .van-button {
        border: none;
      }
    }
    .btn {
      border-radius: 20px;
      margin-top: 30px;
    }
  }
}
</style>